<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	
	<script src="/jquery/" type="text/javascript"></script>
	<script src="/jquerymobile/" type="text/javascript"></script>
	<script src="/socket.io/socket.io.js" type="text/javascript"></script>
	<script src="/my/" type="text/javascript"></script>
	
	<link rel="stylesheet" type="text/css" href="/style/">
	<link rel="stylesheet" type="text/css" href="/jquerymobilecss/">
	
	<style type="text/css"></style>

	<script type="text/javascript">
// ################################# init 
// see also /my/ .. js.
		var socket = io.connect('http://SERVER:80/'); //Init socket.io and connect
		
				
		$(window).on('load', function(){ //after everything is loaded.
			socket.emit('hello'); //say hello to the server
		});
		
		$(document).ready(function(){ //execute after DOM, before Content (for jQuery stuff.. )
			/* Init.. */
			document.getElementById('text').disabled = true;
			document.getElementById('SendButton').disabled = true;
			$("#SendButton").click(function(){ 
				SendChatMessage();
			});
			
			$("#NickButton").click(function(){ 
				SendManualMessage('/nick:', document.getElementById('Nickname').value);
			});
			
			$('#text').keyup(function(event){ // triggers code on Enter - 13
				if(event.keyCode == 13) {
					SendChatMessage();
				}
			});
		});
		
//######################################## socket.io stuff..		
		//Server says Hello to us! (after we said Hello to him,.. see above)
		socket.on('reHello', function (data) { 
			//now unlock all emit's and buttons and stuff... so we can interact.. :D
			document.getElementById('ChatBox').innerHTML = data; // Server data to ChatBox, also deletes content in div
			document.getElementById('text').value = "";
			document.getElementById('text').disabled = false;
			document.getElementById('SendButton').disabled = false;
			$('#ChatBox').height($(window).height()-90);
			ChatBoxReady = true;
			$('#checkUsername').popup('open');
		});
		
		//oh, a new chat message arrives...
		socket.on('chatmessage', function (data) { 
			AppendMessage(data); // Append new Message to ChatBox 
		});
		
		//oh, a new sys message arrives...
		socket.on('sysMsg', function (data) { 
			AppendMessage('<b>' + data + '</b>'); // Append new Message to ChatBox 
		});
		
		//ask for messagesize (sizecounter on text type)
		socket.on('msgsize', function(data) {
			MessageSize = data;
		});
		
		
		// Auto Element Resizing... on window resize
		$(window).resize(function() {
			$('#ChatBox').height($(window).height()-90);
		});
		
		//ask for Nick, popuppppp
		socket.on('nick', function (data) { 
			$('#checkUsername').popup('open');
		});
		
		socket.on('error', 
		
	</script>

</head>
<!-- <body style="margin: 0 0 0 0;"> -->
<div data-role="page">
	<div data-role="header" data-position="fixed">
		<h1>nodejs_chatbox</h1>
		<button data-inline="true" data-theme="a" style="float: left;" onclick="SendChatMessage()" type="button" class="ChatInput" value="send" id="SendButton">Send</button>
		<a href="#checkUsername" data-inline="true" data-theme="a" style="float: left;" type="button" data-rel="popup" data-position-to="window" >Nick</a>
	
	</div><!-- /header -->
	<div style="overflow: scroll; width: 100%; border: none; height: 300px;" id="ChatBox">ChatBox (connecting...)</div>
	<div data-role="footer" data-position="fixed">
		<input style="width:90%;" class="ChatInput" id="text" type="text" value="connecting... (please wait)">
	</div>
	<div data-role="popup" id="checkUsername" data-overlay-theme="a" data-theme="c" data-dismissable="false" style="max-width: 400px;" class="ui-corner-all">
		<div data-role="header" data-theme="d" class="ui-corner-bottom ui-content">
			<h1>Nickname?</h1>
		</div>
		<div data-role="content" data-theme="d">
			<p>Please Set a Nick: A-Z a-z 0-9</p>
			<input style="width:90%;" class="Nickname" id="Nickname" type="text" value="">
			<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" id="NickButton">Ok</a>
		</div>
	</div>
</div><!-- /page -->
<!-- </body> -->
</html>
